* {
  margin: 0;
  padding: 0;

  .art {
    .art-nav {
      height: 90px;
      background-color: #f84c55;

      .t-navbar {
        --td-navbar-bg-color: #f84c55;
        --td-navbar-color: #fff;
      }
    }

    .search-page {
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      background-color: #f6f6f6;
      margin-top: -30px;
      padding: 20px;
      font-family: Arial, sans-serif;

      .filter-bar {
        display: flex;
        gap: 10px;
        margin-bottom: 10px;

        .filter-button {
          padding: 5px 20px;
          border: none;
          background-color: white;
          color: #666;
          border-radius: 20px;
          cursor: pointer;
        }

        .filter-button.active {
          background-color: rgba(255, 0, 0, 0.3);
          border: 1px solid red;
          color: red;
        }
      }

      .search-bar {
        display: flex;
        margin-bottom: 20px;

        input {
          flex: 1;
          padding: 5px;
          border: 1px solid #ccc;
          border-radius: 20px 0 0 20px;
          outline: none;
        }

        .search-button {
          background-color: #ff6b6b;
          color: white;
          border: none;
          border-radius: 0 20px 20px 0;
          padding: 10px 20px;
          cursor: pointer;
        }
      }

      .card-list {
        display: grid;
        gap: 10px;

        .card {
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 10px;
          background-color: white;

          h3 {
            margin: 0 0 5px 0;
          }

          p {
            margin: 0;
            color: #666;
          }
        }
      }
    }
  }
}